<!--
/**
* Author: txj
* Date: 2023年8月15日15:53:10 
* Desc: 点餐订单详情
*/
-->
<template>
  <view class="main">
    <view v-if="orderInfo.getOrderStatus === '4'" class="tip"
      >您的餐品已完成，请前往卖品柜台出示取餐码取餐。</view
    >
    <view class="flex-1 scorll">
      <view class="pd30 bc-white">
        <view class="fs30 fc3 b">取餐影城</view>
        <view class="mt35 flex-b">
          <view class="fs30 fc3">{{ orderInfo.cinemaName }}</view>
          <view>{{ getDistance() }}</view>
        </view>
        <view class="fs24 fc9 mt20">{{ orderInfo.cinemaAddress }}</view>
      </view>
      <view class="bc-white mt20">
        <view class="flex-b flex-m h110 plr30">
          <view class="fs30 fc3 b">取餐码</view>
          <view class="flex-col flex-col-bottom">
            <view v-if="hasFoodNo" class="fs36 fc-yellow b">{{
              orderInfo.getFoodNo
            }}</view>
            <view
              @click="cancleOrder"
              v-if="orderInfo.getOrderStatus == 2"
              class="fs24 fc-blue"
            >
              取消订单</view
            >
            <view
              class="fs24 fc3 mt10"
              :class="orderInfo.getOrderStatus == 5 ? 'fc-yellow' : ''"
              >{{ orderInfo.getOrderStatusName }}</view
            >
          </view>
        </view>
        <view v-if="hasgetFoodTime" class="flex-b flex-m bt h110 plr30">
          <view class="fs30 fc3 b">取餐时间</view>
          <view class="fs24 fc3">预计{{ orderInfo.getFoodTime }}</view>
        </view>

        <!-- 已取消 -->
        <view
          v-if="orderInfo.getOrderStatus == 5"
          class="flex-b flex-m bt h110 plr30"
        >
          <view class="fs30 fc3 b">取消原因</view>
          <view>
            <view class="fs24 fc3" v-if="orderInfo.getCancelReason"
              >商家取消</view
            >
            <view class="fs24 fc3">{{
              orderInfo.getCancelReason ? orderInfo.getCancelReason : '用户取消'
            }}</view>
          </view>
        </view>
      </view>
      <view class="pd30 bc-white mt20">
        <view class="fs30 fc3 b mb20">点餐明细</view>
        <mall-buy-item-by-sure-order
          is-order
          v-for="(item, i) in orderInfo.detail"
          :key="i"
          :item-data="item"
        ></mall-buy-item-by-sure-order>
      </view>
      <view class="pd30 bc-white mt20">
        <view class="fs30 mb30 b">订单信息</view>
        <view class="flex flex-m mb20">
          <view class="label mr20">订单编号</view>
          <view class="fs24">{{ orderInfo.orderNo }}</view>
        </view>
        <view class="flex flex-m mb20">
          <view class="label mr20">下单时间</view>
          <view class="fs24">{{ orderInfo.orderTime }}</view>
        </view>
        <view class="flex flex-m mb20">
          <view class="label mr20">购买手机</view>
          <view class="fs24">{{ orderInfo.mobile }}</view>
        </view>
      </view>
      <view class="pd30 bc-white mt20">
        <view class="fs30 mb30 b">支付信息</view>
        <view
          v-for="(item, index) in orderInfo.payInfo"
          :key="index"
          class="flex flex-m mb20"
        >
          <view class="label mr20">{{ item.name }}</view>
          <view class="fs24">{{ item.value }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import Price from '@/components/Price'
  import MallBuyItemBySureOrder from '@/pages/mall/mallBuyItemBySureOrder'
  export default {
    // 挂载组件
    components: { Price, MallBuyItemBySureOrder },

    // 数据
    data() {
      return {
        orderInfo: {}
      }
    },

    // 计算属性
    computed: {
      hasFoodNo() {
        const status = this.orderInfo.getOrderStatus
        console.log('hasFoodNo', status)
        return (
          status === '0' || status === '1' || status === '3' || status === '4'
        )
      },
      hasgetFoodTime() {
        const status = this.orderInfo.getOrderStatus
        return status === '0' || status === '2' || status === '3'
      }
    },

    // 挂载完成
    mounted() {},
    // #ifdef H5
    beforeRouteLeave(to, from, next) {
      const toPath = to.path
      console.log('hch', to, from, next)
      if (
        [
          '/pagesOrder/sureOrder/index',
          '/pagesOrder/goodsPay/index',
          '/pages/mall/mallPay'
        ].includes(toPath)
      ) {
        this.$tools.navigateTo('/pages/index/index', {}, 'reLaunch')
      } else {
        next()
      }
    },
    // #endif
    // 创建完成
    created() {},
    async onLoad(options) {
      console.log(options, 'options')
      this.title = options.title
      if (!this.title) {
        this.pageTitle = '支付结果'
      }
      this.type = options.type
      this.orderId = options.orderId
      await this.initData()
    },
    // 挂载方法
    methods: {
      cancleOrder() {
        const op = {
          title: '取消订单提醒',
          content: '确认取消订单?\n取消后，券和支付金额将原路退回。',
          confirmColor: '#2FB3FF',
          cancelText: '暂不取消',
          confirmText: '取消订单'
        }
        this.$msg.showModal(op).then(() => {
          uni.$api.orderFood
            .cancelOrder({ orderId: this.orderId })
            .then((res) => this.initData())
        })
      },

      getDistance() {
        const { lat, lng } = this.$auth.getLoctionAreaInfo()

        const distance = this.$utils.getDistance(
          lat,
          lng,
          this.orderInfo.latitude,
          this.orderInfo.longitude
        ) // 计算距离
        return this.$utils.getDistanceTxt(distance)
      },
      initData() {
        uni.$api.orderFood
          .getOrderInfo({ orderId: this.orderId })
          .then((res) => (this.orderInfo = res))
      }
    }
  }
</script>
<style lang="scss" scoped>
  .main {
    .tip {
      width: 100%;
      padding: 18rpx 30rpx;
      background: #fffbe3;
      font-size: 26rpx;
      color: #ffa800;
    }
    background-color: #f2f2f2;
    height: 100vh;
    flex-direction: column;
    display: flex;
    .scorll {
      overflow: scroll;
    }

    .buttom-view {
      background-color: white;
      height: 140rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
      padding: 20rpx 30rpx;
      .btn {
        width: 246rpx;
        height: 100rpx;
        color: white;
        font-size: 36rpx;
        background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
        border-radius: 18rpx;
        text-align: center;
        line-height: 100rpx;
      }
    }
  }
</style>
